// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

class Dialog extends React.Component {
  constructor(props) {
    super(props);
    this.dom = document.createElement('div');
    this.dom.classList.add('demo')
    this.dom.innerHTML = 'dialog tips'
    document.body.appendChild(this.dom);
  }

  render() {
    return (
      ReactDOM.createPortal(
        <div className="dialog">{this.props.message}</div>,
        this.dom
      )
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <h1>React.createPortal</h1>
        <Dialog message="对话狂"/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",